//基础颜色
@blue-1: #f0f7ff;
@blue-2: #cfe4ff;
@blue-3: #a6c9ff;
@blue-4: #7dadff;
@blue-5: #5487ff;
@blue-6: #2b6afd;
@blue-7: #1a52d6;
@blue-8: #0c32b0;
@blue-9: #031e8a;
@blue-10: #011163;

@orange-1: #fff7e6;
@orange-2: #ffdda3;
@orange-3: #ffca7a;
@orange-4: #ffb452;
@orange-5: #ff9b29;
@orange-6: #f17a00;
@orange-7: #cc5f00;
@orange-8: #a64800;
@orange-9: #803300;
@orange-10: #592100;

@red-1: #fff4f0;
@red-2: #ffd4c7;
@red-3: #ffb19e;
@red-4: #f78872;
@red-5: #eb5c46;
@red-6: #de321f;
@red-7: #b81c11;
@red-8: #910a06;
@red-9: #6b0000;
@red-10: #450002;

@green-1: #def2da;
@green-2: #a5e69c;
@green-3: #79d971;
@green-4: #50cc49;
@green-5: #29bf26;
@green-6: #08b30c;
@green-7: #008c07;
@green-8: #006608;
@green-9: #004007;
@green-10: #001a04;

@yellow-1: #fffce6;
@yellow-2: #fff5bd;
@yellow-3: #ffeb94;
@yellow-4: #ffdf6b;
@yellow-5: #ffd042;
@yellow-6: #ffbf19;
@yellow-7: #d9980b;
@yellow-8: #b37400;
@yellow-9: #8c5600;
@yellow-10: #663c00;

@gray-1: #ffffff;
@gray-2: #fafafa;
@gray-3: #f5f5f5;
@gray-4: #ececec;
@gray-5: #d9d9d9;
@gray-6: #bfbfbf;
@gray-7: #8c8c8c;
@gray-8: #595959;
@gray-9: #434343;
@gray-10: #262626;
@gray-11: #1f1f1f;
@gray-12: #141414;
@gray-13: #000000;

@font-gray1: fade(@gray-13, 90%);
@font-gray2: fade(@gray-13, 65%);
@font-gray3: fade(@gray-13, 45%);
@font-gray4: fade(@gray-13, 25%);

//主题色
@theme-light: @blue-1;
@theme-focus: @blue-3;
@theme-hover: @blue-5;
@theme-color: @blue-6;
@theme-active: @blue-7;

//告警色
@warning-light: @orange-1;
@warning-focus: @orange-3;
@warning-hover: @orange-5;
@warning-color: @orange-6;
@warning-active: @orange-7;

//错误色
@error-light: @red-1;
@error-focus: @red-3;
@error-hover: @red-5;
@error-color: @red-6;
@error-active: @red-7;

//成功色
@success-light: @green-1;
@success-focus: @green-3;
@success-hover: @green-5;
@success-color: @green-6;
@success-active: @green-7;

//中性色
@text-title: @font-gray1;
@text-primary: @font-gray2;
@text-secondary: @font-gray3;
@text-placeholder: @font-gray4;
@white: @gray-1;
@component-border: @gray-5;
@component-stroke: @gray-4;
@bg-page: @gray-3;
@bg-component: @gray-2;
@table-header-bg: @gray-3;
@table-border: @gray-5;
@table-bg: @gray-1;
@table-hover: @gray-2;
@table-active: @blue-1;

//圆角
.border-radius (@radius:4px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

//阴影
.shadow (@x,@y,@b,@c) {
  -webkit-box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -o-box-shadow: @arguments;
  -ms-box-shadow: @arguments;
  box-shadow: @arguments;
}

.shadow-button-normal {
  .shadow(0px,2px,0px,rgba(0, 0, 0, 0.02)); //常规按钮
}

.shadow-button-warning {
  .shadow(0px,2px,0px,rgba(222, 50, 31, 0.04)); //危险按钮
}

.shadow-button-primary {
  .shadow(0px,2px,0px,rgba(43, 106, 253, 0.04)); //主按钮
}

.shadow-pop {
  .shadow( 0px,2px,8px,rgba(0, 0, 0, 0.1)); //弹窗阴影
}

.shadow-bottom {
  .shadow( 0px,-2px,6px,rgba(0, 0, 0, 0.05)); //底部悬浮阴影
}

.shadow-right {
  .shadow( -2px,0px,6px,rgba(0, 0, 0, 0.05)); //右边悬浮阴影
}
